<template>
  <el-dialog v-model="dialogVisible" :title="title" width="500">
    <el-form
      label-width="110"
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      class="demo-ruleForm"
      status-icon
    >
      <el-form-item label="项目名称" prop="name">
        <el-input placeholder="请输入项目名称" v-model="ruleForm.name" />
      </el-form-item>
      <!-- <el-form-item label="项目描述" prop="desc">
        <el-input
          type="textarea"
          placeholder="请输入项目描述"
          v-model="ruleForm.desc"
        />
      </el-form-item> -->
      <el-form-item label="项目编号" prop="number">
        <el-input placeholder="请输入项目编号" v-model="ruleForm.number" />
      </el-form-item>
      <el-form-item label="金额" prop="money">
        <el-input placeholder="请输入金额" v-model="ruleForm.money" />
      </el-form-item>
      <el-form-item label="服务领域" prop="sort">
        <el-select
          placeholder="请选择服务领域"
          v-model="ruleForm.sort"
          @change="
            val => {
              ruleForm.type = val == '社区服务类' ? '1' : '2';
            }
          "
        >
          <el-option label="社区服务类" value="社区服务类"></el-option>
          <el-option label="为老服务类" value="为老服务类"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="承接单位">
        <el-select placeholder="请选择承接单位" v-model="ruleForm.unit">
          <el-option
            label="杭州青青草公益服务中心"
            value="杭州青青草公益服务中心"
          ></el-option>
          <el-option label="XXX社会组织" value="XXX社会组织"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="项目周期">
        <el-date-picker
          v-model="ruleForm.createTime"
          :disabled-date="disabledDate"
          type="daterange"
          style="width: 360px"
          value-format="YYYY-MM-DD"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="resetForm(ruleFormRef)">取消</el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import type { FormInstance, FormRules } from "element-plus";
import { ref, reactive, defineExpose, defineEmits } from "vue";
import { ElMessageBox } from "element-plus";
import { getCurrentDate } from "@pureadmin/utils";
const title = ref("");
const dialogVisible = ref(false);
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
  name: "",
  desc: "",
  money: "",
  sort: "",
  unit: "",
  type: "",
  id: "",
  show: false,
  number: ""
});
const row = ref("");
const init = (show, obj) => {
  row.value = "";
  dialogVisible.value = true;
  title.value = "新增项目";
  if (show) {
    ruleForm.show = true;
  }
  ruleForm.sort = obj?.sort || "";
  ruleForm.type = obj?.type || "";
  ruleForm.number = obj?.number || "";
  ruleForm.unit = obj?.unit || "";
  ruleForm.name = obj?.name || "";
  ruleForm.money = obj?.money || "";
  ruleForm.id = new Date().getTime().toString();
  row.value = obj || "";
  ruleForm.createTime= obj?.createTime||''
};
const disabledDate = time => {
  return (
    time.getTime() > Date.now() ||
    time.getTime() < Date.now() - 3600 * 1000 * 24 * 90
  );
};
defineExpose({
  dialogVisible,
  init
});
const $emit = defineEmits(["submitClick", "submitsub"]);

const rules = reactive<FormRules>({
  name: [{ required: true, message: "请输入项目名称", trigger: "blur" }],
  // desc: [{ required: true, message: "请输入项目描述", trigger: "blur" }],
  number: [{ required: true, message: "请输入项目编号", trigger: "blur" }],
  sort: [{ required: true, message: "请输入项目类型", trigger: "blur" }]
});
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      dialogVisible.value = false;
      if (row.value) {
        $emit(
          "submitsub",
          Object.assign({}, ruleForm, {
            status: "正常",
            // createTime: getCurrentDate({ type: 2 }).ymd,
            parentId: row.value.id
          })
        );
      } else {
        $emit(
          "submitClick",
          Object.assign({}, ruleForm, {
            status: "正常",
            // createTime: getCurrentDate({ type: 2 }).ymd,
            children: []
          })
        );
      }
      formEl.resetFields();
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  dialogVisible.value = false;
};
</script>
